<template>
  <div class="info-desc-container" :style="layoutStyle">
    <span class="item" :style="itemStyle">
      <input
        class="input_dash"
        v-model="infos[0].title"
        @change="dataChange"
        :style="keyStyle"
      />
      <input
        class="input_dash"
        v-model="infos[0].value"
        @change="dataChange"
        :style="valueStyle"
      />
    </span>
    <span class="item" :style="itemStyle">
      <input
        class="input_dash"
        v-model="infos[1].title"
        @change="dataChange"
        :style="keyStyle"
      />
      <input
        class="input_dash"
        v-model="infos[1].value"
        @change="dataChange"
        :style="valueStyle"
      />
    </span>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'InfoDesc',
  props: {
    infos: {
      type: Array,
      default: [
        {
          title: '新建',
          value: '自定义',
        },
        { title: '新建', value: '自定义' },
      ],
    },
    layoutType: {
      type: String,
      default: 'two',
    },
  },
  computed: {
    layoutStyle() {
      return this.layoutType === 'one'
        ? {
            flexDirection: 'column',
            marginTop: 0,
          }
        : ''
    },
    itemStyle() {
      return this.layoutType === 'one'
        ? {
            marginTop: '10px',
            color: '#fff',
          }
        : ''
    },
    keyStyle() {
      return this.layoutType === 'one'
        ? {
            width: '80px',
            textAlignLast: 'justify',
            textAlign: 'justify',
            backgroundColor: 'inherit',
            color: '#fff',
            fontSize: this.myFontSize,
          }
        : {
            width: '80px',
            textAlignLast: 'justify',
            textAlign: 'justify',
            fontSize: this.myFontSize,
          }
    },
    valueStyle() {
      return this.layoutType === 'one'
        ? {
            backgroundColor: 'inherit',
            color: '#fff',
            fontSize: this.myFontSize,
            width: '160px',
          }
        : {
            width: '160px',
            fontSize: this.myFontSize,
          }
    },
    ...mapGetters(['myFontSize']),
  },
  methods: {
    dataChange() {
      this.$emit('infoDescUpdate', this.infos)
    },
  },
}
</script>

<style scoped lang="less">
.info-desc-container {
  width: 100%;
  display: flex;
  justify-content: left;
  margin-top: 5px;
}
.item {
  flex: 1;
  padding-left: 10px;
}
.input_dash {
  border-width: 0ch;
  border-color: transparent;
  border-width: 1px;
  border-style: dotted;
  background-color: transparent;
  color: black;
  line-height: 1.5;
}
.input_dash:focus {
  background: none;
  outline: none;
  border: 0px;
  border-color: tomato;
  border-width: 1px;
  border-style: dotted;
}
</style>
